<template>
  <div class="p-main">
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getJcxmLbByMarketATy } from "@/util/home.js";
import { getArrayValue, array2obj, getData, createOption } from "./common";

export default {
  data() {
    return {
      myChart: null,
      option: {},
      pieData: [],
      marketId: "",
    };
  },
  inject: ["currentMarketId"],
  created() {},
  mounted() {
    let chartDom = document.getElementById("main");
    this.myChart = echarts.init(chartDom);
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  watch: {
    pieData: function (data) {
      console.log("pie2 watch pieData :", data);
      this.myChart.clear();
      let arrName = getArrayValue(data, "name");
      // let arrValue = getArrayValue(data, "value");
      // let sumValue = eval(arrValue.join("+"));
      let objData = array2obj(data, "name");
      let optionData = getData(data);

      let option = createOption(arrName, optionData, objData);
      this.myChart.setOption(option);
    },
    marketId: function (marketId) {
      console.log("pie2 watch marketid :", marketId);
      let data = [];
      getJcxmLbByMarketATy({ marketId }).then((res) => {
        if (res.data.data.length > 0) {
          for (let item of res.data.data) {
            data.push({
              name: item.name,
              value: item.bfb,
            });
          }
          this.pieData = data;
        }
      });
    },
  },
  methods: {
    getInit() {
      this.marketId = this.currentMarketId();
      console.log("pie2.marketId=", this.marketId);
    },
  },
};
</script>

<style lang="less" scoped>
.p-main {
  width: 100%;
  height: 100%;
  position: relative;

  .p-title {
    position: absolute;
    top: 15px;
    left: 23px;
    font-size: 14px;
    color: #fff;
  }
}

#main {
  width: 100%;
  height: 100%;
}
</style>
